<template>
    <el-form label-width="94px" :style="{ '--theme': $store.getters.themeColor }">
        <el-row style="display: flex; flex-wrap: wrap;">
            <el-col :span="8">
                <el-form-item label="事件编号">
                    <el-input v-model.trim="params.orderId" placeholder="请输入" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8" class="clear-icon">
                <el-form-item label="告警时间">
                    <DateRangePicker :startValue.sync="params.createStartTime" :endValue.sync="params.alarmTimeEnd" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="事发区域">
                    <el-cascader
                        v-model="params.area"
                        :options="areaOptions"
                        clearable
                        :filterable="true"
                        ref="tab1"
                        placeholder="请选择"
                        :show-all-levels="true"
                        :props="areaProps"
                    ></el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="告警类型">
                    <dict-select v-model="params.eventType" fieldKey="typeValue" fieldName="typeName" collapse-tags multiple filterable :dict="getEventTypeList" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="摄像机编号">
                    <el-input v-model.trim="params.deviceCode" placeholder="请输入" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="摄像机名称">
                    <dict-select v-model="params.deviceCode2" fieldKey="deviceCode" fieldName="devName" default-first-option filterable multiple remote :dict="getDeviceList" />
                </el-form-item>
            </el-col>
            <template v-if="!expand">
                <el-col :span="8">
                    <el-form-item label="物联设备编号">
                        <el-input v-model.trim="params.iotDeviceCode" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物联设备名称">
                        <dict-select
                            v-model="params.iotDeviceCode2"
                            fieldKey="deviceCode"
                            fieldName="deviceName"
                            default-first-option
                            filterable
                            multiple
                            remote
                            :dict="getIotDeviceList"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="事件状态">
                        <dict-select
                            v-model="params.eventState"
                            fieldKey="dictLabel"
                            fieldName="dictValue"
                            collapse-tags
                            default-first-option
                            filterable
                            multiple
                            remote
                            :dict="getEventStateList"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="重要等级">
                        <dict-select v-model="params.importanceLevel" fieldKey="dictValue" fieldName="dictLabel" :dict="getImportanceLevelList" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="事件标题">
                        <el-input v-model.trim="params.eventTitle" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="告警来源">
                        <dict-select v-model="params.eventSourse" fieldKey="dictValue" fieldName="dictLabel" :dict="getEventSouceList" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否二次研判">
                        <dict-select v-model="params.isSecondJudge" :dict="dict1" @change="params.secondJudgeResult = ''" />
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="params.isSecondJudge == '1'">
                    <el-form-item label="二次研判结果">
                        <dict-select v-model="params.secondJudgeResult" :dict="resultOption" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否二次识别">
                        <dict-select v-model="params.isSecondIdentify" :dict="dict1" @change="params.secondIdentifyResult = ''" />
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="params.isSecondIdentify == '1'">
                    <el-form-item label="二次识别结果">
                        <dict-select v-model="params.secondIdentifyResult" :dict="resultOption" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="摄像机厂家">
                        <dict-select v-model="params.modelId" fieldKey="dictValue" fieldName="dictLabel" :dict="getVideofactoryList" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <div class="confidenceLevel">
                        <el-form-item label="置信度">
                            <div class="input-wrapper" :style="checkConfidenceLevel() ? '' : 'border:1px solid #FF6A6C'">
                                <div class="bor">
                                    <el-input v-model="params.confidenceLevelMin" @input="verifyConfidenceLevel($event, 'confidenceLevelMin')" placeholder="请输入"></el-input>
                                </div>
                                <div class="bor">
                                    <dict-select v-model="params.minChar" :dict="confidenceLevelSelectData" />
                                </div>
                                <div class="bor center-text">置信度</div>
                                <div class="bor">
                                    <dict-select v-model="params.maxChar" :dict="confidenceLevelSelectData" />
                                </div>
                                <div class="bor bor-none">
                                    <el-input v-model="params.confidenceLevelMax" @input="verifyConfidenceLevel($event, 'confidenceLevelMax')" placeholder="请输入"></el-input>
                                </div>
                                <div class="tips" v-if="!checkConfidenceLevel()" title="“最小值、最大值”需至少填写一项，且最小值需要小于等于最大值">
                                    “最小值、最大值”需至少填写一项，且最小值需要小于等于最大值
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8" v-if="!isCustomer">
                    <el-form-item label="客户名称/ID">
                        <dict-select v-model="params.tenantId" remote fieldKey="tenantId" fieldName="tenantName" :dict="getCustomList" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否超期">
                        <dict-select v-model="params.ifTimeOut" :dict="dict2" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="研判结果">
                        <dict-select v-model="params.judgeResult" :dict="resultOption" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否收藏">
                        <dict-select v-model="params.isCollection" :dict="dict1" />
                    </el-form-item>
                </el-col>
                <template v-if="isCustomer">
                    <!-- 租户视角的组织名称 -->
                    <el-col :span="8">
                        <el-form-item label="组织名称">
                            <el-cascader
                                :show-all-levels="false"
                                v-model="params.orgIdList"
                                placeholder="请选择"
                                collapse-tags
                                filterable
                                :options="orgTreeData"
                                :props="orgTreeProp"
                                clearable
                                style="width: 100%;font-size: 14px"
                            ></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="摄像机标签">
                            <dict-select v-model="params.deviceLabelIdList" fieldKey="labelId" fieldName="labelName" :dict="getDeviceLabelList" multiple collapse-tags />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="告警类型标签">
                            <dict-select v-model="params.tagIdList" fieldKey="tagId" fieldName="tagName" :dict="getTagIdList" multiple collapse-tags />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="告警标签">
                            <dict-select v-model="params.alarmTagIdsList" fieldKey="lableId" fieldName="lableName" :dict="getAlarmTagIdsList" multiple collapse-tags />
                        </el-form-item>
                    </el-col>
                </template>
                <template v-else>
                    <!--  铁塔视角的组织名称 -->
                    <el-col :span="8">
                        <el-form-item label="组织名称">
                            <el-cascader
                                v-model="params.orgIdList"
                                :show-all-levels="false"
                                placeholder="请选择"
                                collapse-tags
                                filterable
                                :options="orgTreeData"
                                :props="orgTreeProp"
                                clearable
                                style="width: 100%;font-size: 14px"
                                ref="orgName"
                                @change="handleCascaderChange"
                            ></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="showEnlargeFlag">
                        <el-form-item label="是否3D放大">
                            <dict-select v-model="params.enlargeFlag" :dict="dict1" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="showAlgorithmCode">
                        <el-form-item label="算法编码">
                            <el-input v-model.trim="params.algorithmCode" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </template>
            </template>
        </el-row>
    </el-form>
</template>
<script>
import { getAllTags } from '@/api/modules/configManagemnet/labelConfig.js'
import {
    getEnumInfo,
    findOrderAlarm,
    getDeviceList,
    queryTenantLabelList,
    getAllLables,
    getRegion,
    getIotDeviceList,
    getCustOrganTreeNew
} from '@/api/modules/eventManagement/eventManagement'
import { queryTenantInfo } from '@/api/modules/modulesCommon'
import DictSelect from '@/components/form/DictSelect'
import DateRangePicker from '@/components/form/DateRangePicker'

const { tenantId } = JSON.parse(localStorage.$loginInfo)

const getEnumInfoFun = (_params) => {
    return async () => {
        try {
            const res = await getEnumInfo(_params)
            if (res.code === 200) {
              return res.data
            }
        } catch (err) {
            console.error(err)
            return []
        }
    }
}

export default {
    components: { DictSelect, DateRangePicker },
    props: {
        // 查询参数
        params: {
            type: Object,
            required: true
        },
        // 展开更多查询条件
        expand: Boolean,
        // 用户角色 true用户视角，false铁塔视角
        isCustomer: {
            type: Boolean,
            default: !!tenantId
        },
        // 是否显示是否3D放大
        showEnlargeFlag: Boolean,
        // 是否显示算法代码
        showAlgorithmCode: Boolean
    },

    data() {
        return {
            dict1: [
                { id: '1', name: '是' },
                { id: '0', name: '否' }
            ],
            dict2: [
                { id: '1', name: '是' },
                { id: '2', name: '否' }
            ],
            dict3: [
                { id: '1', name: '真警' },
                { id: '2', name: '误报' },
                { id: '3', name: '重复告警' }
            ],
            areaOptions: [],
            resultOption: [
                { id: '1', name: '真' },
                { id: '0', name: '假' },
                { id: '3', name: '算法未分析' }
            ],
            confidenceLevelSelectData: [
                { id: '100', name: '<' },
                { id: '101', name: '≤' }
            ],
            orgTreeData: [],
            orgTreeProp: {
                checkStrictly: true,
                multiple: true,
                value: 'id',
                label: 'label'
            },
            areaProps: {
                checkStrictly: true,
                lazy: true,
                label: 'areaName',
                value: 'areaCode',
                async lazyLoad(node, resolve) {
                    if (node.level === 3) {
                      return resolve()
                    }
                    const res = await getRegion({ areaLevel: node.level + 2, areaParentCode: node.value })
                    if (node.level === 2) res.data.map((item) => (item.leaf = true))
                    if (res.code === 200) resolve(res.data)
                    else resolve([])
                }
            }
        }
    },
    methods: {
        // 重要等级
        getImportanceLevelList: getEnumInfoFun({ enumTypeId: 90 }),
        // 事件来源
        getEventSouceList: getEnumInfoFun({ enumTypeId: 'warning_source_common' }),
        // 事件状态
        getEventStateList: getEnumInfoFun({ enumTypeId: 65 }),
        // 事件类型
        getVideofactoryList: getEnumInfoFun({ enumTypeId: 103 }),

        // 获取设备列表
        async getEventTypeList() {
            let res = await findOrderAlarm({})
            return res.code === 200 ? res.data : []
        },

        // 获取设备列表
        async getDeviceList(devName) {
            const [provinceId, cityId, countyId] = this.params.area
            let res = await getDeviceList({ devName, cityId, provinceId, countyId })
            return res.code === 200 ? res.data : []
        },

        // 获取物联设备列表
        async getIotDeviceList(iotDeviceCode) {
            let res = await getIotDeviceList({ iotDeviceCode })
            return res.code === 200 ? res.data : []
        },

        // 搜索客户名称下拉列表查询
        async getCustomList(keyword) {
            const [err, res] = await queryTenantInfo({ keyword })
            return !err && res.code === 200 ? res.data : []
        },

        // 摄像机下拉
        async getDeviceLabelList() {
            const res = await queryTenantLabelList({ tenantId: this.$store.getters.userInfo.tenantId })
            return res.code === 200 ? res.data : []
        },

        // 告警类型标签
        async getTagIdList() {
            const res = await getAllTags()
            return res.code === 200 ? res.data : []
        },

        // 告警标签
        async getAlarmTagIdsList() {
            const res = await getAllLables()
            return res.code === 200 ? res.data : []
        },

        // 置信度输入校验
        checkConfidenceLevel() {
            if (this.params.confidenceLevelMin != '' && this.params.confidenceLevelMin === this.params.confidenceLevelMax) {
                this.params.minChar = '101'
                this.params.maxChar = '101'
                return true
            }
            if (this.params.confidenceLevelMin != '' && this.params.confidenceLevelMax != '' && this.params.confidenceLevelMin > this.params.confidenceLevelMax) {
                return false
            }
            return true
        },

        async getOrgTreeData() {
            if (this.isCustomer) {
                this.orgTreeProp.label = 'deptName'
                this.orgTreeProp.value = 'deptId'
                const res = await getCustOrganTreeNew({ orgSource: '1', orgType: '1', tenantId })
                if (res.code === 200) this.orgTreeData = res.data
            } else {
                this.orgTreeData = this.$store.getters.userDeptTreeOptions
                this.orgTreeProp.label = 'label'
                this.orgTreeProp.value = 'id'
            }
        }
    },
    mounted() {
        this.$watch('expand', (_, expand) => expand && !this.orgTreeData.length && this.getOrgTreeData())
    }
}
</script>
<style lang="scss" scoped>
.confidenceLevel {
    .el-icon-arrow-up:before {
        content: '\e78f';
    }
    .input-wrapper {
        width: 100%;
        height: 32px;
        display: flex;
        flex-wrap: nowrap;
        border: 1px solid #dcdfe6;
        border-radius: 5px;
        position: relative;
        .tips {
            position: absolute;
            left: 0;
            top: 32px;
            font-size: 12px;
            color: #ff6a6c;
            height: 12px;
            line-height: 1;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    .bor /deep/.el-input__inner {
        border: none;
        height: 100%;
        padding: 0;
        width: 100%;
        margin: 0;
        background: transparent;
        font-size: 12px;
        text-align: center;
    }
    .bor /deep/ .el-select .el-input__inner {
        text-align: right;
    }
    .bor {
        flex: 1;
        border-right: 1px solid #dcdfe6;
        display: flex;
        justify-content: center;
        /deep/.el-input--small {
            height: 30px;
            line-height: 30px;
        }
        /deep/.el-select--small {
            height: 30px;
            line-height: 30px;
            max-width: 60px;
        }
        /deep/.el-input__icon {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #909399;
        }
    }
    .bor-none {
        border: none;
    }
}
</style>
